@import '~ant-design-vue/es/style/themes/default.less';

.article-input {
  .w-e-text img {
    max-width: 100%;
    height: auto;
  }

  .avatar-upload-wrapper {
    height: 200px;
    width: 100%;
  }

  .ant-upload-preview {
    position: relative;
    width: 160px;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 0 4px #ccc;

    .upload-icon {
      position: absolute;
      top: 0;
      right: 10px;
      font-size: 1.4rem;
      padding: 0.5rem;
      background: rgba(222, 221, 221, 0.7);
      border-radius: 4px;
      border: 1px solid rgba(0, 0, 0, 0.2);
    }

    .mask {
      opacity: 0;
      position: absolute;
      background: rgba(0, 0, 0, 0.4);
      cursor: pointer;
      transition: opacity 0.4s;

      &:hover {
        opacity: 1;
      }

      i {
        font-size: 2rem;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -1rem;
        margin-top: -1rem;
        color: #d6d6d6;
      }
    }

    img, .mask {
      width: 160px;
      height: auto;
      border-radius: 4px;
      overflow: hidden;
    }

    .ant-avatar {
      position: static;
    }
  }

}

.media-data {
  padding: 10px 0;

  .media-items {
    display: table;
    width: 100%;

    .media-item {
      display: block;
      width: 200px;
      height: 136px;
      float: left;
      padding: 5px;
      margin-bottom: 5px;
      overflow: hidden;
      text-align: center;
      cursor: pointer;

      &:hover {
        .media-item-body {
          background-color: #f5f5f5;
        }
      }

      .media-item-body {
        padding: 5px;
      }

      &.media-item-active {
        .media-item-body {
          background-color: @primary-2;
        }
      }

      .media-item-preview {
        height: 95px;
        margin-bottom: 5px;
      }

      .media-item-name {
        width: 100%;
      }

      &.media-item-video, &.media-item-audio, &.media-item-doc, &.media-item-other {
        .media-item-preview {
          padding: 30px 15px;

          .anticon {
            font-size: 38px;
          }
        }
      }

      &.media-item-image {
        .media-item-preview {
          position: relative;
          background-position: 0 0, 10px 10px;
          background-size: 20px 20px;
          background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%), linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);

          img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            max-width: 100%;
            max-height: 100%;
          }
        }
      }
    }
  }

}

.insert-alert {
  display: inline-block;
  width: 180px;
  margin-right: 10px
}
